<template>
      <div id="bl">
            <div class="content">
                  <div class="inner">
                        <div class="fixed">
                              <img src="../../assets/img/zfb.png" alt="">
                              <div class="txt">
                                    刷脸支付 ------- 智能收银
                              </div>
                              <div class="btns">
                                    <div class="btn" :class="{'active': act == '0'}" @mouseover="act = '0'">蜻蜓F4</div>
                                    <div class="btn" :class="{'active': act == '1'}" @mouseover="act = '1'">蜻蜓F1</div>
                              </div>
                        </div>
                        <div class="item" v-for="(item, index) in listData" :key="index">
                              <div class="container" v-if="act == index">
                                    <div class="left">
                                          <div class="iconbox">
                                                <div class="icon-item" v-for="(tem, inx) in item.icons" :key="inx">
                                                      <div class="icons">
                                                            <img :src="tem.icon" alt="">
                                                            <div class="name">{{ tem.name }}</div>
                                                      </div>
                                                </div>
                                          </div>
                                          <div class="infobox">
                                                <div class="info-item" v-for="(info, ins) in item.info" :key="ins">
                                                      <div class="info-title">
                                                            {{ info.title }}
                                                      </div>
                                                      <div class="info-txt">
                                                            {{ info.txt }}
                                                      </div>
                                                </div>
                                          </div>
                                          <div class="desc" v-if="item.desc">
                                                <div class="desc-item" v-for="(desc, li) in item.desc" :key="li">
                                                      <img :src="desc.icon" alt="">
                                                      <div class="desc-name">{{ desc.name }}</div>
                                                </div>
                                          </div>
                                    </div>
                                    <div class="main">
                                          <img :src="item.main" alt="">
                                    </div>
                              </div>
                        </div>
                  </div>
            </div>
      </div>
</template>

<script>
      export default {
            data() {
                  return {
                        listData: [
                                    {
                                          icons: [
                                                {
                                                      icon: require("../../assets/img/ic1.png"),
                                                      name: "酒店"
                                                },
                                                {
                                                      icon: require("../../assets/img/ic2.png"),
                                                      name: "商场"
                                                },
                                                {
                                                      icon: require("../../assets/img/ic3.png"),
                                                      name: "奶茶店"
                                                },
                                                {
                                                      icon: require("../../assets/img/ic4.png"),
                                                      name: "水果店"
                                                },
                                                {
                                                      icon: require("../../assets/img/ic5.png"),
                                                      name: "服装店"
                                                },
                                                {
                                                      icon: require("../../assets/img/ic6.png"),
                                                      name: "更多"
                                                },
                                          ],
                                          info: [
                                                {
                                                      title: "助力商家",
                                                      txt:"会员转化率提升6倍， 年轻用户增长50%以上，全面助力商家经营"
                                                },
                                                {
                                                      title: "即插即用",
                                                      txt:"无需安装插件， 连接付呗即可使用，信息同步更方便"
                                                },
                                          ],
                                          main: require("../../assets/img/produ1.png")
                                    },
                                    {
                                          icons: [
                                                {
                                                      icon: require("../../assets/img/icc1.png"),
                                                      name: "3D结构光"
                                                },
                                                {
                                                      icon: require("../../assets/img/icc2.png"),
                                                      name: "刷脸支付"
                                                },
                                                {
                                                      icon: require("../../assets/img/icc3.png"),
                                                      name: "即插即用"
                                                },
                                                {
                                                      icon: require("../../assets/img/icc4.png"),
                                                      name: "扫码支付"
                                                },
                                                {
                                                      icon: require("../../assets/img/icc5.png"),
                                                      name: "语音播报"
                                                },
                                                {
                                                      icon: require("../../assets/img/icc6.png"),
                                                      name: "电子海报"
                                                },
                                          ],
                                          info: [
                                                {
                                                      title: "更快识别  轻松到账  实时报账",
                                                      txt:"顾客只需刷脸，即可完成支付"
                                                },
                                                
                                          ],
                                          desc: [
                                                { icon: require("../../assets/img/desc1.png"), name: "刷脸支付"},
                                                { icon: require("../../assets/img/desc2.png"), name: "扫码支付"},
                                          ],
                                          main: require("../../assets/img/produ2.png")
                                    }
                              ],
                              act: "0",
                  }
            },
      }
</script>

<style lang="scss" scoped>
#bl {
      width: 100%;
      .content {
            max-width: 1920px;
            height: 600px;
            background: url("../../assets/img/probg1.png") 0 0 no-repeat;
            background-size: contain;
            margin: 20px auto;
            .item {
                  width: 1440px;
                  margin: 0 auto;
            }
            .inner {
                  width: 1440px;
                  margin: 0 auto;
                  padding-top: 30px;
                  position: relative;
                  left: 0;
                  top: 0;
                  .fixed {
                        color: #fff;
                        position: absolute;
                        left: 30px;
                        top: 30px;
                        .txt {
                              font-size: 36px;
                              margin: 30px 0;
                        }
                        .btns {
                              display: flex;                            
                              .btn {
                                    width: 200px;
                                    height:50px;
                                    border-bottom: 1px solid #fff;
                                    line-height: 50px;
                                    font-size: 24px;
                                    text-align: center;
                                    
                              }
                              .active {
                                    border: 1px solid #2B40CC;
                                    color: #2B40CC;
                              }
                        }
                  }
                  .item {
                        width: 1440px;
                        margin: 0 auto;
                        
                        display: flex;
                        color: #fff;
                        .container {
                              width: 1440px;
                              margin: 0 auto;
                              
                              display: flex;
                        }
                        .left {
                              width: 100%;
                              .iconbox {
                                    width: 800px;
                                    display: flex;
                                    padding-top: 200px;
                                    .icon-item {
                                    margin: 20px; 
                                    text-align: center;
                                    }
                              }
                              .infobox {
                                    .info-item {
                                          margin: 20px;
                                          .info-title {
                                                font-size: 36px;
                                          }
                                          .info-txt {
                                                font-size: 24px;
                                          }
                                    }
                              }
                              .desc {
                                    width: 100%;
                                    display: flex;
                                    .desc-item {
                                          margin: 20px;
                                          display: flex;
                                          align-items: center;
                                          font-size: 24px;
                                          .desc-name {
                                                margin-left: 20px;
                                          }
                                    }
                              }
                        }
                  }
            }
      }
}
</style>